<template>
  <div class="ppt-detail" v-loading="loading">
    <el-card class="ppt-info-card">
      <div class="ppt-header">
        <div class="ppt-cover">
          <img :src="pptInfo.coverUrl" :alt="pptInfo.title">
        </div>
        <div class="ppt-info">
          <h1 class="ppt-title">{{ pptInfo.title }}</h1>
          <div class="ppt-meta">
            <div class="meta-item">
              <i class="el-icon-user"></i>
              <span>作者: {{ pptInfo.author }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-date"></i>
              <span>上传时间: {{ formatDate(pptInfo.uploadTime) }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-download"></i>
              <span>下载次数: {{ pptInfo.downloads }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-view"></i>
              <span>浏览次数: {{ pptInfo.views }}</span>
            </div>
          </div>
          
          <div class="ppt-tags">
            <el-tag size="medium" type="primary">{{ getCategoryName(pptInfo.category) }}</el-tag>
            <el-tag size="medium" type="success">{{ pptInfo.format.toUpperCase() }}</el-tag>
            <el-tag size="medium" type="info">{{ pptInfo.size }}</el-tag>
          </div>
          
          <div class="ppt-actions">
            <el-button type="primary" icon="el-icon-view" @click="previewPpt">在线预览</el-button>
            <el-button type="success" icon="el-icon-download" @click="downloadPpt">下载课件</el-button>
            <el-button icon="el-icon-star-off" :type="isCollected ? 'warning' : ''" @click="toggleCollection">
              {{ isCollected ? '取消收藏' : '收藏' }}
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="ppt-content-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="课件简介" name="intro">
          <div class="ppt-description" v-html="pptInfo.description"></div>
        </el-tab-pane>
        
        <el-tab-pane label="课件预览" name="preview">
          <div class="preview-container">
            <div v-if="previewImages.length > 0" class="preview-slides">
              <el-carousel :interval="4000" type="card" height="450px">
                <el-carousel-item v-for="(slide, index) in previewImages" :key="index">
                  <img :src="slide" :alt="`幻灯片 ${index + 1}`" class="slide-image">
                </el-carousel-item>
              </el-carousel>
            </div>
            <el-empty v-else description="暂无预览图片"></el-empty>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="用户评价" name="comments">
          <div class="comments-section">
            <div class="comment-form">
              <h3>发表评价</h3>
              <el-rate v-model="newComment.rating" show-text></el-rate>
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入您对此课件的评价..."
                v-model="newComment.content">
              </el-input>
              <div class="form-actions">
                <el-button type="primary" @click="submitComment">提交评价</el-button>
              </div>
            </div>
            
            <div class="comment-list">
              <h3>全部评价 ({{ comments.length }})</h3>
              <el-empty v-if="comments.length === 0" description="暂无评价"></el-empty>
              
              <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                <div class="comment-header">
                  <div class="user-info">
                    <el-avatar :size="40" :src="comment.avatar"></el-avatar>
                    <span class="username">{{ comment.username }}</span>
                  </div>
                  <div class="comment-rating">
                    <el-rate v-model="comment.rating" disabled></el-rate>
                    <span class="comment-time">{{ formatDate(comment.time) }}</span>
                  </div>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    
    <!-- 相关课件推荐 -->
    <el-card class="related-ppt-card">
      <div slot="header">
        <span>相关课件推荐</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(ppt, index) in relatedPpts" :key="index">
          <el-card class="ppt-card" shadow="hover" @click.native="goToDetail(ppt.id)">
            <div class="ppt-cover">
              <img :src="ppt.coverUrl" :alt="ppt.title">
              <div class="ppt-format">{{ ppt.format.toUpperCase() }}</div>
            </div>
            <div class="ppt-info">
              <h3 class="ppt-title">{{ ppt.title }}</h3>
              <div class="ppt-meta">
                <span><i class="el-icon-user"></i> {{ ppt.author }}</span>
                <span><i class="el-icon-download"></i> {{ ppt.downloads }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 预览弹窗 -->
    <el-dialog title="PPT在线预览" :visible.sync="previewVisible" fullscreen>
      <div class="preview-dialog-content">
        <div class="preview-iframe-container" v-if="pptInfo.previewUrl">
          <iframe :src="pptInfo.previewUrl" frameborder="0"></iframe>
        </div>
        <el-empty v-else description="暂不支持在线预览此格式"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PptDetail',
  
  data() {
    return {
      loading: true,
      pptId: null,
      pptInfo: {
        title: '',
        author: '',
        uploadTime: '',
        downloads: 0,
        views: 0,
        category: '',
        format: '',
        size: '',
        coverUrl: '',
        description: '',
        previewUrl: ''
      },
      activeTab: 'intro',
      previewVisible: false,
      isCollected: false,
      previewImages: [],
      comments: [],
      relatedPpts: [],
      newComment: {
        rating: 5,
        content: ''
      }
    }
  },
  
  created() {
    this.pptId = this.$route.params.id
    this.fetchPptDetail()
    this.fetchComments()
    this.fetchRelatedPpts()
  },
  
  methods: {
    async fetchPptDetail() {
      try {
        this.loading = true
        // 这里替换为实际的API调用
        // const response = await this.$api.ppt.getPptDetail(this.pptId)
        
        // 模拟数据
        setTimeout(() => {
          this.pptInfo = {
            title: 'JavaScript高级编程技巧',
            author: '张老师',
            uploadTime: '2023-05-15',
            downloads: 256,
            views: 1024,
            category: 'programming',
            format: 'pptx',
            size: '5.2MB',
            coverUrl: 'https://via.placeholder.com/800x450?text=JavaScript',
            description: `<p>本PPT课件详细讲解了JavaScript高级编程技巧，包括以下内容：</p>
            <ul>
              <li>闭包和高阶函数的使用</li>
              <li>异步编程和Promise</li>
              <li>ES6+新特性详解</li>
              <li>设计模式在JavaScript中的应用</li>
              <li>性能优化技巧</li>
            </ul>
            <p>适合有一定JavaScript基础的学生学习提高。</p>`,
            previewUrl: 'https://view.officeapps.live.com/op/embed.aspx?src=https://example.com/sample.pptx'
          }
          
          this.previewImages = [
            'https://via.placeholder.com/800x450?text=Slide1',
            'https://via.placeholder.com/800x450?text=Slide2',
            'https://via.placeholder.com/800x450?text=Slide3',
            'https://via.placeholder.com/800x450?text=Slide4',
            'https://via.placeholder.com/800x450?text=Slide5'
          ]
          
          this.loading = false
        }, 500)
      } catch (error) {
        this.$message.error('获取PPT课件详情失败')
        this.loading = false
      }
    },
    
    async fetchComments() {
      try {
        // 这里替换为实际的API调用
        // const response = await this.$api.ppt.getComments(this.pptId)
        
        // 模拟数据
        setTimeout(() => {
          this.comments = [
            {
              username: '学生A',
              avatar: 'https://via.placeholder.com/40',
              rating: 5,
              content: '非常实用的课件，讲解得很清晰，例子也很丰富。',
              time: '2023-06-10'
            },
            {
              username: '学生B',
              avatar: 'https://via.placeholder.com/40',
              rating: 4,
              content: '内容很好，但是部分代码示例有点难理解，希望能有更详细的注释。',
              time: '2023-06-08'
            },
            {
              username: '学生C',
              avatar: 'https://via.placeholder.com/40',
              rating: 5,
              content: '这个课件帮我解决了很多问题，特别是关于闭包的部分讲解得非常透彻。',
              time: '2023-06-05'
            }
          ]
        }, 300)
      } catch (error) {
        this.$message.error('获取评论失败')
      }
    },
    
    async fetchRelatedPpts() {
      try {
        // 这里替换为实际的API调用
        // const response = await this.$api.ppt.getRelatedPpts(this.pptId)
        
        // 模拟数据
        setTimeout(() => {
          this.relatedPpts = [
            {
              id: 7,
              title: 'Node.js实战教程',
              coverUrl: 'https://via.placeholder.com/300x200?text=Node.js',
              author: '张老师',
              downloads: 186,
              format: 'pptx'
            },
            {
              id: 8,
              title: 'Vue.js前端开发',
              coverUrl: 'https://via.placeholder.com/300x200?text=Vue.js',
              author: '李老师',
              downloads: 210,
              format: 'ppt'
            },
            {
              id: 9,
              title: 'React入门到精通',
              coverUrl: 'https://via.placeholder.com/300x200?text=React',
              author: '王老师',
              downloads: 175,
              format: 'pdf'
            },
            {
              id: 10,
              title: '前端性能优化指南',
              coverUrl: 'https://via.placeholder.com/300x200?text=Performance',
              author: '赵老师',
              downloads: 132,
              format: 'pptx'
            }
          ]
        }, 300)
      } catch (error) {
        this.$message.error('获取相关课件失败')
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    
    getCategoryName(category) {
      const categoryMap = {
        'science': '科学',
        'math': '数学',
        'language': '语文',
        'english': '英语',
        'programming': '编程'
      }
      return categoryMap[category] || category
    },
    
    previewPpt() {
      this.previewVisible = true
    },
    
    async downloadPpt() {
      try {
        this.$message.success('开始下载课件')
        // 这里替换为实际的下载逻辑
        // await this.$api.ppt.downloadPpt(this.pptId)
      } catch (error) {
        this.$message.error('下载失败')
      }
    },
    
    toggleCollection() {
      this.isCollected = !this.isCollected
      this.$message.success(this.isCollected ? '收藏成功' : '已取消收藏')
      // 这里替换为实际的API调用
      // await this.$api.ppt.toggleCollection(this.pptId, this.isCollected)
    },
    
    submitComment() {
      if (!this.newComment.content) {
        this.$message.warning('请输入评价内容')
        return
      }
      
      // 这里替换为实际的API调用
      // await this.$api.ppt.submitComment(this.pptId, this.newComment)
      
      this.comments.unshift({
        username: '我',
        avatar: this.$store.getters.avatar || 'https://via.placeholder.com/40',
        rating: this.newComment.rating,
        content: this.newComment.content,
        time: new Date().toISOString().split('T')[0]
      })
      
      this.$message.success('评价提交成功')
      this.newComment.content = ''
      this.newComment.rating = 5
    },
    
    goToDetail(id) {
      if (id === parseInt(this.pptId)) return
      this.$router.push(`/ppt-center/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.ppt-detail {
  padding: 20px;
  
  .ppt-info-card {
    margin-bottom: 20px;
    
    .ppt-header {
      display: flex;
      
      .ppt-cover {
        width: 300px;
        height: 200px;
        margin-right: 20px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .ppt-info {
        flex: 1;
        
        .ppt-title {
          margin: 0 0 15px;
          font-size: 24px;
        }
        
        .ppt-meta {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 20px;
          
          .meta-item {
            margin-right: 20px;
            margin-bottom: 10px;
            color: #606266;
            
            i {
              margin-right: 5px;
            }
          }
        }
        
        .ppt-tags {
          margin-bottom: 20px;
          
          .el-tag {
            margin-right: 10px;
          }
        }
        
        .ppt-actions {
          .el-button {
            margin-right: 10px;
          }
        }
      }
    }
  }
  
  .ppt-content-card {
    margin-bottom: 20px;
    
    .ppt-description {
      padding: 20px;
      line-height: 1.6;
      
      ul {
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
        }
      }
    }
    
    .preview-container {
      padding: 20px;
      
      .preview-slides {
        .slide-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    
    .comments-section {
      padding: 20px;
      
      .comment-form {
        margin-bottom: 30px;
        
        h3 {
          margin-bottom: 15px;
        }
        
        .el-rate {
          margin-bottom: 15px;
        }
        
        .el-input {
          margin-bottom: 15px;
        }
      }
      
      .comment-list {
        h3 {
          margin-bottom: 20px;
        }
        
        .comment-item {
          margin-bottom: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid #ebeef5;
          
          &:last-child {
            border-bottom: none;
          }
          
          .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            
            .user-info {
              display: flex;
              align-items: center;
              
              .username {
                margin-left: 10px;
                font-weight: bold;
              }
            }
            
            .comment-rating {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              
              .comment-time {
                margin-top: 5px;
                font-size: 12px;
                color: #909399;
              }
            }
          }
          
          .comment-content {
            line-height: 1.6;
          }
        }
      }
    }
  }
  
  .related-ppt-card {
    .ppt-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .ppt-cover {
        position: relative;
        height: 150px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .ppt-format {
          position: absolute;
          top: 10px;
          right: 10px;
          padding: 2px 8px;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          border-radius: 4px;
          font-size: 12px;
        }
      }
      
      .ppt-info {
        padding: 10px;
        
        .ppt-title {
          margin: 0 0 10px;
          font-size: 16px;
          height: 44px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .ppt-meta {
          display: flex;
          justify-content: space-between;
          color: #909399;
          font-size: 13px;
          
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
}

.preview-dialog-content {
  height: 100%;
  
  .preview-iframe-container {
    height: 100%;
    
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}

@media (max-width: 768px) {
  .ppt-detail {
    .ppt-info-card {
      .ppt-header {
        flex-direction: column;
        
        .ppt-cover {
          width: 100%;
          height: auto;
          margin-right: 0;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style> 